iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
Modern Web

走入前端,才從0開始數,初學者歷程系列 第 9

day9-嘿Animation就是CSS動畫

  • 分享至 

  • xImage
  •  

搭給賀~今天想來試做看CSS Animation,常常看到有人在講animation,就是透過css來做出動畫效果啦~是不是很酷!可以讓原本只是更改外觀的樣式變成動起來喔!於是就趁這次鐵人文章來學習及練習如何使用。

開頭,起手:使用關鍵影格@keyframes

@keyframes ani ->ani自定義名稱,下面會有屬性講解
  from
    left: 0
  to
    left: 100%

from(開始)跟to(結束)可以使用%數作為代替:

from(可以使用0%數代替)代表動畫時間的0%

to(可以使用100%數代替)代表動畫時間的100%

@keyframes ani
  0%
    left: 0
  50%
	可自訂樣式...	
  100%
    left: 100%

可以變成以上這樣~有發現中間插入了一個50%的關鍵影格位置嗎?代表你可以根據自身需求去設置多個位置!


這個codepen是一開始的基礎板,可以先跟著做簡單的概念。

https://codepen.io/cinj/pen/bGpOvdM

1.先設置html,body的css背景樣式

2.設置白色方塊,並用絕對定位

3.設置裡面移動的方塊樣式,設定相對定位

4.起手式,動畫影格@keyframes

先做到上面的步驟,再把以下屬性閱讀完畢來開始做動畫效果。


再來了解CSS動畫屬性有以下幾種:

animation-name:動畫名稱,ex: ani 自訂義

animation-duration:動畫持續的時間,ex: 1s

animation-delay:動畫延遲播放時間,ex:2s / -2s

有時候不想要他一進畫面就執行,設置2s代表2秒後開始執行動畫,設置-2s代表進入網頁前已開始執行2秒(像快轉概念。

animation-iteration-count:動畫播放次數,可設定播放幾次,如果要重複播放就寫infinite。

animation-direction:動畫播放方向。

  • reverse 為反向播放
  • alternate正播一次、反播一次
  • alternate-reverse為alternate的相反

animation-fill-mode:動畫播放前後模式。

  • both 可讓畫面往前後填補
  • forwards 動畫結束後,保持在最後一個影格狀態
  • backwards 動畫結束後,保持在第一個影格狀態(其實跟none預設值效果一樣)

animation-play-state:動畫播放或暫停狀態

  • running:預設值,動畫播放
  • paused 動畫暫停

當學完以上的屬性之後,你會覺得要寫這麼多看起來會很雜啊!

別怕~簡寫寫法來了:

簡寫:

animation:name / duration / delay / iteration-count / direction

*注意:
當只給一個時間的話是持續時間

animation: ani 2s ->持續時間

給兩個時間的話前面是持續,後面是delay

					 / 持續,delay /
animation: ani 2s 1s

最後,看完上面的屬性後,就可以跟著我今天學習的codepen做做看了!今天先學基本款,明天預備練習一個比較炫砲的動畫:)

接續上面codepen所完成的:

https://codepen.io/cinj/pen/eYZbMqz


上一篇
day8-CSS選擇器筆記
下一篇
day10-CSS Animation動畫實作篇
系列文
走入前端,才從0開始數,初學者歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言